<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">   
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href=""/>
	<link rel="stylesheet" type="text/css" th:href="${#request.getContextPath()}+'/static/foodDelivery/css/normalize-mobile.css'" media="all"/>
<style>
html,body{ min-width: 320px; max-width: 750px; margin: auto; width: 100%; height: 100%; background: url(../../../ATPension/static/foodDelivery/img/bg.png) no-repeat left top; background-size: 100% 100% }
.fb{ font-weight: bold;}
.f18px{ font-size: 18px; }
.pad30{ padding: 20px; }
.green{ color: #1C9399; }
.lh60px{ line-height: 60px; }
.text-center{ text-align: center; }
.box-shadows{ 
	box-shadow: 0px 2px 18px 0px #EEEFF1;
	border-radius: 4px;
}
.nav-time{ line-height: 54px; padding:0 20px; }
.nav-time li{ display: flex; border-bottom: 1px solid #eee; }
.nav-time li div:nth-child(1){ width: 30%; }
.nav-time li div:nth-child(2){ margin-left: auto; width: 70%; }
.nav-time li div p{ background:url(../../../ATPension/static/foodDelivery/img/check.png) no-repeat center center; background-size: 10px 8px; float: right; margin: 17px 0; width: 20px; height: 20px; border: 1px solid #ccc; border-radius: 2px; }
.nav-time li div p.current{ border: 1px solid #1C9399; background-color: #1C9399; }
.nav-time li div p.noSelect{ border: 1px solid #ccc; background-color: #ccc; }
.nav-time li div input{ width: 100%; outline: none; line-height: 22px; background: url(../../../ATPension/static/foodDelivery/img/icon_time_iphone.png) no-repeat right center; background-size: 22px; }
.btn-con{ position: fixed; bottom: 0; left: 0; right: 0; }
.btn-con p{
	margin: 20px;
	line-height: 45px;
	color: #fff;
	background: #1C9399;
	box-shadow: 0px 2px 18px 0px rgba(28, 147, 153, 0.8);
	border-radius: 4px;
}
</style>
</head>
<body>
<input id="orgIdInput" th:value="${orgId}" type="hidden">
	<div class="pad30 text-center">
		<p class="box-shadows green f18px lh60px fb">塔庙村-中餐-36份</p>
	</div>
	<nav class="nav-time">
		<ul>
		<li>
			<div>就餐日期</div>
			<div><input th:value="${currentDate}" id="jiucanriqiInput" type="text" readonly class="test-item"></div>
		</li>
		</ul>
		<ul id="dataUl">

		</ul>
	</nav>
	<div class="btn-con text-center f18px">
		<p id="confirmButton">确&nbsp;认</p>
	</div>
	<script th:src="${#request.getContextPath()}+'/static/js/jquery-2.1.3.min.js'"></script>
	<script th:src="${#request.getContextPath()}+'/static/layer/mobile/layer.js'"></script>
	<script th:src="${#request.getContextPath()}+'/static/laydate/laydate.js'"></script>
	<script>
	$(function(){
		let currDate = $("input#jiucanriqiInput").val();
		if(currDate && $.trim(currDate) && "null" != currDate){
			getFoodType(currDate);
		}

		laydate.render({
			elem: '.test-item' ,
			trigger: 'click',
			done:function (value) {
				getFoodType(value)
			}
		});

		$("p#confirmButton").on("click",function (e) {
			let event = $("ul#dataUl p.current");
			let month = $("input#jiucanriqiInput").val();
			let orgId = $("input#orgIdInput").val();
			if(orgId) {
				if(month) {
					if (event && event.length > 0) {
						let type = "";
						$(event).each(function (i, v) {
							type += $(this).data("type") + ",";
						})
						if (type) {
							type = type.substring(0, type.length - 1);
						}
						submit(orgId,month,type);
					} else {
						layer.open({
							title: [
								'提示',
								'background-color: #FF4351; color:#fff;'
							]
							, content: "请至少选择一项配餐！"
							,time : 3
						});
					}
				}else{
					layer.open({
						title: [
							'提示',
							'background-color: #FF4351; color:#fff;'
						]
						, content: "就餐日期不能为空！"
						,time : 3
					});
				}
			}else{
				layer.open({
					title: [
						'提示',
						'background-color: #FF4351; color:#fff;'
					]
					, content: "村社区读取失败，请重新扫码进入！"
					,time : 3
				});
			}
		})
	});

	function submit(orgId,month,type) {
		$.ajax({
			url:"../foodConfirm/confirm",
			type: "post",
			dataType: "json",
			data: {"orgId": orgId, "month": month,"type":type},
			success: function (result) {
				layer.open({
					title: [
						'提示',
						'background-color: #FF4351; color:#fff;'
					]
					, content: result.msg
					,time : 3
				});
				if(result.code == 200){
					let arr = type.split(",");
					if(arr && arr.length > 0){
						arr.forEach(function (v, i) {
							$("p#selectP_"+v).removeClass("current").addClass("noSelect");
						})
						initClick();
					}
				}
			}
		});
	}

	function getFoodType(date) {
		if(date) {
			$.ajax({
				url: "../foodConfirm/getFoodType",
				type: "post",
				dataType: "json",
				data: {"orgId": $("input#orgIdInput").val(), "month": date},
				success: function (result) {
					if (result.code == 200) {
						let data = result.data;
						if (data && data.length > 0) {
							let html = "";
							data.forEach(function (v, i) {
								if (v.type == "1" || v.type == 1) {
									if (v.confirm_status == "1" || v.confirm_status == 1) {
										html += '<li><div>午餐-' + v.count + '份</div><div><p id="selectP_1" data-type="1"></p></div></li>';
									}else{
										html += '<li><div>午餐-' + v.count + '份</div><div><p id="selectP_1" class="noSelect" data-type="1"></p></div></li>';
									}
								} else if (v.type == "2" || v.type == 2) {
									if (v.confirm_status == "1" || v.confirm_status == 1) {
										html += '<li><div>晚餐-' + v.count + '份</div><div><p id="selectP_2" data-type="2"></p></div></li>';
									}else{
										html += '<li><div>晚餐-' + v.count + '份</div><div><p id="selectP_2" class="noSelect" data-type="2"></p></div></li>';
									}
								}
							})
							$("ul#dataUl").html(html);
							initClick();
						} else {
							$("ul#dataUl").html("");
							layer.open({
								title: [
									'提示',
									'background-color: #FF4351; color:#fff;'
								]
								, content: "当前日期没有订餐信息！"
								,time : 3
							});
						}
					} else {
						$("ul#dataUl").html("");
						layer.open({
							title: [
								'提示',
								'background-color: #FF4351; color:#fff;'
							]
							, content: result.msg
							,time : 3
						});
					}
				}
			})
		}else{
			$("ul#dataUl").html("");
			layer.open({
				title: [
					'提示',
					'background-color: #FF4351; color:#fff;'
				]
				, content: "请先选择就餐日期！"
				,time : 3
			});
		}
	}

	function initClick() {
		$('.nav-time ul#dataUl li div p:not(.noSelect)').unbind().on("click",function () {
			if ($(this).hasClass("current")) {
				$(this).removeClass('current');
			} else {
				$(this).addClass('current');
			}
		});
	}
	</script>
</body>
</html>
